<template>
	<view class="content">
		<view>
			<uni-search-bar radius="100" placeholder="请搜索商品" cancelButton="none" bgColor="#fff"
				@confirm="handleSearch" />
		</view>
		<view class="main">
			<view class="flower-type">
				<scroll-view scroll-y="true">
					<view class="flower-type-item" :class="{active:currentType === -1}" @click="handleChangeType(-1)">
						全部
					</view>
					<view class="flower-type-item" :class="{active:currentType===item.id}"
						v-for="item in flowerTypeList" :key="item.id" @click="handleChangeType(item.id)">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
			<view class="product-list">
				<view class="product-list-sort">
					<view class="sort-item" :class="{active:currentSort === 1}" @click="handleChangeSort(1)">综合排序
					</view>
					<view class="sort-item" :class="{active:[2,3].includes(currentSort)}" @click="handleChangeSort(2)">
						按价格
						<view class="price-sort">
							<uni-icons type="up" :color="currentSort === 2?'#f73a3a':'#333333'"></uni-icons>
							<uni-icons type="down" :color="currentSort === 3?'#f73a3a':'#333333'"></uni-icons>
						</view>
					</view>
					<view class="sort-item" :class="{active:currentSort === 4}" @click="handleChangeSort(4)">按销量
					</view>
				</view>
				<scroll-view scroll-y="true" class="product-list-wrap" @scrolltolower="handleReachBottom">
					<uni-list>
						<uni-list-item v-for="item in productList" :key="item.id">
							<template #body>
								<view class="product-item" @click="toProductDetail(item.id)">
									<image class="cover"
										:src="item.images && item.images.length > 0?SERVER_URL+item.images[0]:'/static/images/flower.png'">
									</image>
									<view class="info">
										<view class="name">{{ item.name }}</view>
										<view class="sales">销量：{{ item.sales_count ?? 0 }}</view>
										<view class="price">
											<text>￥{{ item.price }}</text>
											<uni-icons type="cart" size="28" color="#f83a3a"></uni-icons>
										</view>
									</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		reactive,
		ref
	} from "vue"
	import {
		SERVER_URL
	} from "@/config/index.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useShoppingCartStore
	} from "@/stores/shopping-cart.js"

	const handleSearch = (e) => {
		if (e.value.trim()) {
			uni.navigateTo({
				url: "/pages/search/search?kw=" + e.value.trim()
			})
		}
	}

	const flowerTypeList = ref([])

	const currentType = ref(-1)

	const loadFlowerType = () => {
		return new Promise((resolve, reject) => {
			uni.showLoading()
			uni.request({
				url: SERVER_URL + '/flower/type/all',
				method: "GET",
				success: (res) => {
					if (res.statusCode === 200) {
						console.log(res.data);
						flowerTypeList.value = res.data
						// if (res.data.length > 0) {
						// 	currentType.value = res.data[0].id
						// }
						resolve()
					} else {
						reject()
					}
				},
				fail: (e) => {
					reject(e)
				},
				complete: () => {
					uni.hideLoading()
				}
			});
		})
	}

	const handleChangeType = (e) => {
		currentType.value = e
		state.page = 0
		productList.value = []
		loadProduct()
	}

	// 1 - 综合排序
	// 2 - 价格升序
	// 3 - 价格降序
	// 4 - 销量升序

	const currentSort = ref(1)

	const handleChangeSort = (e) => {
		if (e === 2 && currentSort.value === 2) {
			currentSort.value = 3
		} else {
			currentSort.value = e
		}

		state.page = 0
		productList.value = []
		loadProduct()
	}

	const state = reactive({
		total: 0,
		page: 0,
		pageSize: 20
	})

	const productList = ref([])

	const handleReachBottom = () => {
		if (state.total > (state.page * state.pageSize)) {
			loadProduct()
		}
	}

	const loadProduct = () => {
		uni.showLoading()
		state.page += 1
		const data = {
			page: state.page,
			page_size: state.pageSize,
			sort: currentSort.value
		}
		if (currentType.value !== -1) {
			data.type = currentType.value
		}
		uni.request({
			url: SERVER_URL + '/flower/list',
			method: "GET",
			data,
			success: (res) => {
				if (res.statusCode === 200) {
					state.page = res.data.page
					state.total = res.data.total
					productList.value = [...productList.value, ...res.data.data]
				} else {
					state.page -= 1
				}
				console.log(res.data);
			},
			fail: (err) => {
				state.page -= 1
				console.log(err)
			},
			complete: () => {
				uni.hideLoading()
			}
		});
	}

	const toProductDetail = (id) => {
		uni.navigateTo({
			url: "/pages/flower/flower?id=" + id
		})
	}

	// const shoppingCartStore = useShoppingCartStore()
	// const handleAddShoppingCart = (e) => {
	// 	shoppingCartStore.addProduct({
	// 		flower_id: e.id,
	// 		quantity: 1
	// 	})
	// }

	onLoad(async () => {
		await loadFlowerType()

		loadProduct()
	})
</script>
<style scoped lang="scss">
	.content {
		height: 100vh;
		background: #f4f3f3;
		display: flex;
		flex-direction: column;

		.main {
			flex: 1;
			display: flex;
			overflow: hidden;

			.flower-type {
				width: 6rem;

				.flower-type-item {
					height: 3rem;
					line-height: 3rem;
					text-align: center;
					position: relative;
					color: #232628;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding: 0 12px;
				}

				.flower-type-item.active {
					color: #f73a3a;
					background: #fff;

					&:before {
						content: "";
						background: #f73a3a;
						position: absolute;
						top: 50%;
						left: 5px;
						width: 3px;
						height: 1.25rem;
						border-radius: 1px;
						transform: translateY(-50%);
					}
				}
			}

			.product-list {
				flex: 1;
				background: #fff;
				overflow: hidden;
				display: flex;
				flex-direction: column;

				.product-list-sort {
					display: flex;
					height: 3rem;
					line-height: 3rem;
					flex-shrink: 0;

					.sort-item {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.price-sort {
						margin-left: 2px;
						display: flex;
						flex-direction: column;
						line-height: 8px;
						justify-content: center;
						align-items: center;

						.active {
							color: red;
						}
					}

					.sort-item.active {
						color: #f73a3a;
					}

				}

				.product-list-wrap {
					flex: 1;
					height: 0;
				}

				.product-item {
					flex: 1;
					display: flex;
					overflow-x: hidden;

					.cover {
						width: 80px;
						height: 80px;
						flex-shrink: 0;
					}

					.info {
						flex: 1;
						margin-left: 12px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						overflow-x: hidden;

						.name {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.sales {
							font-size: 0.75rem;
							color: #999;
						}

						.price {
							font-size: 1.25rem;
							color: #f83a3a;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>